<template>
  <div id="app">
    <nav-bar left-arrow @clickLeft="$goPageBack()"/>
    <div class="pd-all">
      <van-cell-group :border="false" class="border-radius">
        <van-field 
          required
          clearable 
          label="手机号"
          v-model="phone" 
          maxlength="11" 
          type="tel" 
          placeholder="请输入您的手机号" 
        />
        <van-field
          required
          clearable
          label="验证码"
          v-model="captcha"
          center
          maxlength="6" 
          type="tel" 
          placeholder="请输入验证码"
        >
          <sms-wrap slot="button" :phone="phone" ref="smsSend" />
        </van-field>
        <van-field 
          required
          clearable 
          label="登录密码"
          v-model="password" 
          type="password" 
          placeholder="请输入6-16位新密码" 
        />
        <van-field 
          required
          clearable 
          label="确认密码"
          v-model="re_password" 
          type="password" 
          placeholder="请重复输入新密码" 
        />
      </van-cell-group>

      <van-button 
        type="primary" 
        class="mg-top-xxl" 
        :disabled="!verify.flag" 
        block 
        @click="changePwd"
      >提交新密码</van-button>
    </div>

    <slogan class="mg-top-xxl"/>
    
   </div>
</template>

<script>
  import { 
    Field, 
    CellGroup, 
    Button, 
    Icon, 
    Toast, 
  } from 'vant';
  import { mobileReg } from '@utils/regexp';
  import SendSms from '@cmpt_com/sms'
  import { resetPwd } from '@api/modules/user'
  import NavBar from "@cmpt/header/navbar"
  import { getStorageUserByKey } from '@utils/storage_base_config';
  import Slogan from '@cmpt/slogan'
  export default {
    name: 'forgetPwd',
    data(){
        return {
          phone: '',
          captcha: '',
          password: '',
          re_password: '',
        }
    },
    components:{
      [Field.name]: Field,
      [CellGroup.name]: CellGroup,
      [Button.name]: Button,
      [Icon.name]: Icon,
      [SendSms.name]: SendSms,
      [NavBar.name]: NavBar,
      [Slogan.name]: Slogan,
    },
    created() {
      this.phone = getStorageUserByKey('phone')
    },
    computed: {
       verify: function () {
         if(this.captcha.length <= 0){
            return {flag: false, msg: '请输入验证码'};
          }
          if(this.password.length < 6 || this.password.length > 16){
              return {flag: false, msg: '密码长度在6-16个字符之间'};
          }
          if(this.password != this.re_password){
              return {flag: true, msg: '两次输入的密码不一致'};
          }
          return {flag: true, msg: 'ok'};
      }
    },
    methods: {
      changePwd(e){
        if(this.verify.msg != 'ok'){
          Toast(this.verify.msg)
        }else{
          resetPwd({
            phone: this.phone,
            once_str: this.$refs.smsSend.once_str,
            captcha: this.captcha,
            password: this.password,
            re_password: this.re_password,
          }).then(res => {
            if(!res || res.code != 200)return
            Toast('修改成功')
            setTimeout(() => {
              this.$goPageBack()
            }, 2000);
          }).catch(err => {
            this.$refs.smsSend.resend = true
          })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '~@style_m/basic/utils/index';
  #app {
    .van-cell-group.border-radius {
      border-radius: 5px;
      overflow: hidden;
    }

    .van-cell:not(:last-child)::after {
      right: 10px;
      left: 10px;
    }

    .van-button--default {
      border: none;
      border-radius: 0;
      border-left: 1px solid #f3f3f3;
      color: @color-main;
      &[disabled] {
          background: none!important;
          color: #ccc;
      }
    }
  }

</style>
